<template>
	<view class="timeline">
		<view class="radius-box">
			<view class="radius green">
				<u-icon name="checkbox-mark" color="#18B566"  size="40"></u-icon>
			</view>
			<view class="title text-green">打版</view>
		</view>
		<view class="horizontal-green"></view>
		<view class="radius-box">
			<view class="radius" :class="[item.dyStatus === 999 ? 'green':'',item.dyStatus > 0 && item.dyStatus < 999  ? 'blue':'',item.dyStatus === 0 ? 'grey':'']">
				<text class="text-blue" v-if="item.dyStatus > 0 && item.dyStatus  < 999">{{item.dyStatus}}%</text>
				<u-icon name="checkbox-mark" color="#18B566" size="40" v-else-if="item.dyStatus === 999"></u-icon>
				<text class="text-grey" v-else>{{item.dyStatus}}%</text>
			</view>
			<view class="title" :class="[item.dyStatus === 999 ? 'text-green':'',item.dyStatus > 0 && item.dyStatus < 999  ? 'text-blue':'',item.dyStatus === 0 ? 'text-grey':'']">打印</view>
		</view>
		<view :class="[item.dyStatus === 999 ? 'horizontal-green':'',item.dyStatus > 0 && item.dyStatus < 999  ? 'horizontal-blue':'',item.dyStatus === 0 ? 'horizontal-grey':'']"></view>
		<view class="radius-box">
			<view class="radius" :class="[item.zyStatus === 999 ? 'green':'',item.zyStatus > 0 && item.zyStatus < 999  ? 'blue':'',item.zyStatus === 0 ? 'grey':'']">
				<text class="text-blue" v-if="item.zyStatus > 0 && item.zyStatus < 999">{{item.zyStatus}}%</text>
				<u-icon name="checkbox-mark" color="#18B566" size="40" v-else-if="item.zyStatus === 999"></u-icon>
				<text class="text-grey" v-else>{{item.zyStatus}}%</text>
			</view>
			<view class="title" :class="[item.zyStatus === 999 ? 'text-green':'',item.zyStatus > 0 && item.zyStatus < 999  ? 'text-blue':'',item.zyStatus === 0 ? 'text-grey':'']">转印</view>
		</view>
		<view :class="[item.zyStatus === 999 ? 'horizontal-green':'',item.zyStatus > 0 && item.zyStatus < 999  ? 'horizontal-blue':'',item.zyStatus === 0 ? 'horizontal-grey':'']"></view>
		<view class="radius-box">
			<view class="radius" :class="[item.fhzStatus === 999 ? 'green':'',item.fhzStatus > 0 && item.fhzStatus < 999  ? 'blue':'',item.fhzStatus === 0 ? 'grey':'']">
				<text class="text-blue" v-if="item.fhzStatus > 0 && item.fhzStatus < 999">{{item.fhzStatus}}%</text>
				<u-icon name="checkbox-mark" color="#18B566" size="40" v-else-if="item.fhzStatus === 999"></u-icon>
				<text class="text-grey" v-else>{{item.fhzStatus}}%</text>
			</view>
			<view class="title" :class="[item.fhzStatus === 999 ? 'text-green':'',item.fhzStatus > 0 && item.fhzStatus < 999  ? 'text-blue':'',item.fhzStatus === 0 ? 'text-grey':'']">物流</view>
		</view>
		<view :class="[item.fhzStatus === 999 ? 'horizontal-green':'',item.fhzStatus > 0 && item.fhzStatus < 999  ? 'horizontal-blue':'',item.fhzStatus === 0 ? 'horizontal-grey':'']"></view>
		<view class="radius-box">
			<view class="radius" :class="[item.fhStatus === 999 ? 'green':'',item.fhStatus > 0 && item.fhStatus < 999  ? 'blue':'',item.fhStatus === 0 ? 'grey':'']">
				<text class="text-blue" v-if="item.fhStatus > 0 && item.fhStatus < 999">{{item.fhStatus}}%</text>
				<u-icon name="checkbox-mark" color="#18B566" size="40" v-else-if="item.fhStatus === 999"></u-icon>
				<text class="text-grey" v-else>{{item.fhStatus}}%</text>
			</view>
			<view class="title" :class="[item.fhStatus === 999 ? 'text-green':'',item.fhStatus > 0 && item.fhStatus < 999  ? 'text-blue':'',item.fhStatus === 0 ? 'text-grey':'']">签收</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"project-process",
		props: {
			item: {
				type: Object
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.timeline{
		display: flex;
		padding: 0 10rpx;
		justify-content: space-between;
		.radius-box{
			margin-top: 20rpx;
			font-size: 28rpx;
			.radius{
				width: 80rpx;
				height: 80rpx;
				padding-top: 20rpx;
				text-align: center;
				border-radius: 50%;
			}
			.green{
				border: 5rpx solid $u-type-success;
			}
			.blue{
				border: 5rpx solid $u-type-primary;
			}
			.grey{
				border: 5rpx solid $u-type-info-disabled;
			}
			.title{
				padding-left: 12rpx;
				padding-top: 12rpx;
				font-size: 28rpx;
			}
			.text-green{
				color: $u-type-success;
			}
			.text-blue{
				color: $u-type-primary;
			}
			.text-grey{
				color: $u-type-info-disabled;
			}
		}
		.horizontal-green{
			margin-top: 60rpx;
			width: 80rpx;
			height: 1rpx;
			border-bottom: 5rpx solid $u-type-success;
		}
		.horizontal-blue{
			margin-top: 60rpx;
			width: 80rpx;
			height: 1rpx;
			border-bottom: 5rpx solid $u-type-primary;;
		}
		.horizontal-grey{
			margin-top: 60rpx;
			width: 80rpx;
			height: 1rpx;
			border-bottom: 5rpx solid $u-type-info-disabled;
		}
		
	}
</style>